<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .banner{position: relative;margin: 0 auto;width: 400px;height: 120px;overflow: hidden;}
    .banner .imgbox{position:absolute;left:0;}
    .banner .imgbox img{width: 400px;height: 120px;float: left;}
    .banner .imgbox img.active{display: block;}

    .banner .btns input{position: absolute;width:30px;height:30px;border: none;top:45px;}
    .banner .btns .left{left:0}
    .banner .btns .right{right:0}
    .banner .btns input:active{background: #66a;color: #fff;}
  </style>
</head>
<body>
  <div class="banner">
    <div class="imgbox">
    </div>
    <div class="btns">
      <input type="button" class="left" value="<">
      <input type="button" class="right" value=">">
    </div>
  </div>
</body>
<script src="../move.js"></script>
<script>

  const data = [{
    src:"../imgs/banner1.jpg",
    alt:"图片1",
    title:"图片1"
  },{
    src:"../imgs/banner2.jpg",
    alt:"图片hello",
    title:"图片hello"
  },{
    src:"../imgs/banner3.jpg",
    alt:"world图片",
    title:"world图片"
  },{
    src:"../imgs/banner4.jpg",
    alt:"图片hahhaha",
    title:"图片hahaa"
  },{
    src:"../imgs/banner5.jpg",
    alt:"图片",
    title:"图片"
  }]
  
  function Banner( { cont, left, right, imgbox, index, data } ){
    this.left = left;
    this.right = right;
    this.cont = cont;
    this.imgbox = imgbox;
    this.index = index;
    this.data = data;
    this.init();
    this.addEvent();
  }
  Banner.prototype.init = function(){
    let str = "";
    this.data.forEach(val=>{
      str += `<img src="${val.src}" alt="${val.alt}" title="${val.title}">`;
    })
    // 无缝1：将第0张图片，重复放在最后一张
    str += `<img src="${this.data[0].src}" alt="${this.data[0].alt}" title="${this.data[0].title}">`;
    this.imgbox.innerHTML = str;
    this.imgW = this.imgbox.children[0].offsetWidth;
    this.imgbox.style.width = this.imgbox.children.length * this.imgW + "px";
    this.imgbox.style.left = -this.index * this.imgW + "px"
  }
  Banner.prototype.addEvent = function(){
    const that = this;
    // 作业：左按钮的功能
    this.left.onclick = function(){}

    this.right.onclick = function(){
      that.changeIndex();
    }
  }

  Banner.prototype.changeIndex = function(){
    if(this.index === this.imgbox.children.length-1){
      // 无缝2：当图片集到最后一张时，原来回到第0张，但第0张和最后一张图片重复，再向后走一张，所以索引变为1
      this.index = 1;
      // 无缝3：此时为了调整运动方向，需要将当前值设置为比目标大，所以，直接将imgbox的当前left设置为0；
      // -2000 -400：当前比目标小，方向不对
      // 0     -400：当前比目标大，方向对
      this.imgbox.style.left = 0;
    }else{
      this.index++;
    }
    this.changeImg();
  }
  Banner.prototype.changeImg = function(){
    move( this.imgbox, {
      left: -this.index * this.imgW
    } )
  }


  var bannerBox = $(".banner");
  var leftEle = $(".banner .left");
  var rightEle = $(".banner .right");
  var imgbox = $(".banner .imgbox");

  // 执行轮播图功能
  new Banner({
    cont:bannerBox,
    left: leftEle, right:rightEle, imgbox,
    index: 0,
    data
  });

  
  
  function $(s){
    return document.querySelector(s);
  }
  function $$(s){
    return document.querySelectorAll(s);
  }
  
</script>
</html>